<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>数据可视化项目</title>
		<link rel="stylesheet" href="css/app.css" />
		<style>
			#channel {
				width: 100%;
				height: 80%;
			}
			#gmv {
				width: 100%;
				height: 100%;
			}
			.t {
				margin-left: 5%;
				margin-top: 1%;
				height: 20%;
				color: white;
			}
		</style>
	</head>
	
	<body>
		<div class="header">
			<h1 class="header-title">数据可视化项目</h1>
		</div>
		<div id="app" class="wrapper">
			<div class="content">
				<div class="col col-l">
					<div class="xpanel-wrapper xpanel-wrapper-40">
						<div class="xpanel xpanel-l-t">
							<div class="title">周一到周日订单量</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-60">
						<div class="xpanel xpanel-l-b">
							<div class="title">销售渠道占比</div>
							<div id="channel"></div>
						</div>
					</div>
				</div>
				<div class="col col-c">
					<div class="xpanel-wrapper xpanel-wrapper-60">
						<div class="xpanel no-bg"></div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-40">
						<div class="xpanel xpanel-c-b">
							<div class="title title-long">2019年GMV走势</div>
							<div id="gmv"></div>
						</div>
					</div>
				</div>
				<div class="col col-r">
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-r-t">
							<div class="title">统计数据</div>
							<div class="t">GMV：{{ gmv }}亿（RMB）</div>
							<div class="t">客单价：{{ arpu }}元</div>
							<div class="t">退货率：{{ backRate }}%</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30">
						<div class="xpanel xpanel-r-m">
							<div class="title">E</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-r-b">
							<div class="title">F</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script>
			// JavaScript
			let app = new Vue({
				el: '#app',
				data: {
					gmv: 0,
					arpu: 0,
					backRate: 0
				},
				created() {
					fetch('/api/stats')
						.then(resp => resp.json())
						.then(json => {
							this.gmv = json.gmv
							this.arpu = json.arpu
							this.backRate = json.backRate
						})
				}
			})
		</script>

		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
		<script>
			let pieChart = echarts.init(document.querySelector('#channel'))
			let channelOption = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					bottom: '-2%',
					left: 'center',
					textStyle: {
						color: '#ffffff'
					}
				},
				series: [
					{
						type: 'pie',
						radius: ['35%', '65%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 6,
							borderColor: '#fff',
							borderWidth: 1
						},
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						data: []
					}
				]
			}

			fetch('/api/channel')
				.then(resp => resp.json())
				.then(json => {
					channelOption.series[0].data = json.data
					pieChart.setOption(channelOption)
				})

			let gmvChart = echarts.init(document.querySelector('#gmv'))
			let gmvOption = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [],
					axisLabel: {
						color: 'white'
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						color: 'white'
					}
				},
				series: [
					{
						name: 'GMV',
						type: 'line',
						data: [],
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						}
					}
				]
			}

			fetch('/api/gmv/2019')
				.then(resp => resp.json())
				.then(json => {
					gmvOption.xAxis.data = json.xData
					gmvOption.series[0].data = json.yData
					gmvChart.setOption(gmvOption)
				})
		</script>
	</body>
</html>